<script setup>
import { ElMenu, ElMenuItem, ElSubMenu, ElDropdown, ElDropdownMenu, ElDropdownItem } from 'element-plus'
import { onMounted, ref } from "vue";
import { router } from "../router/index.js";
import { userStore } from '../stores/index.js'

import {hasPermission} from "./utils/permission.js";


const token=()=>{
  localStorage.getItem('token');
}
const userItemStore = userStore()
const user = localStorage.getItem('user');
const parsedUser = user ? JSON.parse(user) : {}; // 无数据时返回空对象
const userName = ref(parsedUser.staffName || ''); // 无staffName时使用空字符串


const logOut = () => {
  localStorage.clear();
  userItemStore.logout();
  router.push('/front/login')
}

const handleUserCommand = (command) => {
  if (command === 'logout') {
    logOut();
  } else if (command === 'changeAvatar') {
    router.push('/framework/changeAvatar');
  }
};

onMounted(() => {
  if (!localStorage.getItem('token')) {
    router.push('/front/login')
  }
})
</script>

<template>
  <div class="admin-container">


    <!-- 主内容区域 -->
    <main class="main-content">
      <!-- 顶部用户栏 -->
      <header class="main-header">
        <!-- 左边内容：管理平台 -->
        <div class="system-info">
          <i class="el-icon-menu"></i>
          <span>管理平台</span>
        </div>

        <!-- 右边用户信息 -->
        <div class="user-info">
          <!-- 使用 el-dropdown 包裹头像区域 -->
          <el-dropdown trigger="hover" @command="handleUserCommand">
            <div class="avatar-wrapper">
              <img
                  src="../assets/avatar.png"
                  alt="avatar"
                  class="avatar"
              >
              <span>{{ userName }}</span>
            </div>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item command="changeAvatar">更换头像</el-dropdown-item>
                <el-dropdown-item command="logout">退出登录</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>
      </header>
      <div class="main-body">
        <!-- 侧边栏 -->
        <aside class="sidebar">
          <ElMenu
              default-active="1-1"
              class="el-menu-vertical-demo"
              :collapse="false"
          >
            <!-- 门店 -->
            <ElSubMenu index="1">
              <template #title>
                <i class="el-icon-store"></i>
                <el-icon><Shop /></el-icon>
                <span>门店</span>
              </template>
              <ElMenuItem index="1-1">
                <i class="el-icon-menu"></i>
                <router-link to="/framework/carStore" class="content-area">门店列表</router-link>
              </ElMenuItem>
            </ElSubMenu>

            <!-- 服务维护 -->
            <ElSubMenu index="2">
              <template #title>
                <i class="el-icon-wrench"></i>
                <el-icon><Service /></el-icon>
                <span>服务维护</span>
              </template>
              <ElMenuItem index="2-1">
                <i class="el-icon-box"></i>
                <router-link to="/framework/goToProduct" class="content-area">商品库</router-link>
              </ElMenuItem>
              <ElMenuItem index="2-2">
                <i class="el-icon-service"></i>
                <router-link to="/framework/service" class="content-area">服务项目</router-link>
              </ElMenuItem>
            </ElSubMenu>

            <!-- 交易查询 -->
            <ElSubMenu index="3">
              <template #title>
                <i class="el-icon-s-data"></i>
                <el-icon><List /></el-icon>
                <span>交易查询</span>
              </template>
              <ElMenuItem index="3-1">
                <i class="el-icon-document"></i>
                <router-link to="/framework/goToDetails" class="content-area">订单查询</router-link>
              </ElMenuItem>
            </ElSubMenu>

            <!-- 账户 -->
            <ElSubMenu index="4">
              <template #title>
                <i class="el-icon-user"></i>
                <el-icon><User /></el-icon>
                <span>账户</span>
              </template>
              <ElMenuItem index="4-1">
                <i class="el-icon-users"></i>
                <router-link to="/framework/staffInfo" class="content-area">员工账号</router-link>
              </ElMenuItem>
            </ElSubMenu>

            <!-- 预约管理 -->
            <ElSubMenu index="5">
              <template #title>
                <i class="el-icon-date"></i>
                <el-icon><Calendar /></el-icon>
                <span>预约管理</span>
              </template>
              <ElMenuItem index="5-1">
                <i class="el-icon-list"></i>
                <router-link to="/framework/appointment" class="content-area">预约列表</router-link>
              </ElMenuItem>
              <ElMenuItem index="5-2">
                <i class="el-icon-setting"></i>
                <router-link to="/framework/goToDetails" class="content-area">预约配置</router-link>
              </ElMenuItem>
            </ElSubMenu>

            <!-- 设置 -->
            <ElSubMenu index="6">
              <template #title>
                <i class="el-icon-cog"></i>
                <el-icon><Tools /></el-icon>
                <span>设置</span>
              </template>
              <ElMenuItem index="6-1">
                <i class="el-icon-box"></i>
                <router-link to="/framework/unitsInfo" class="content-area">单位库</router-link>
              </ElMenuItem>
              <ElMenuItem index="6-2">
                <i class="el-icon-trademark"></i>
                <router-link to="/framework/brand" class="content-area">品牌管理</router-link>
              </ElMenuItem>
              <ElMenuItem index="6-3">
                <i class="el-icon-rules"></i>
                <router-link to="/framework/goToDetails" class="content-area">预约规则</router-link>
              </ElMenuItem>
              <ElMenuItem index="6-4">
                <i class="el-icon-key"></i>
                <router-link to="/roleWithPermit" class="content-area">权限分配</router-link>
              </ElMenuItem>
            </ElSubMenu>
          </ElMenu>
        </aside>

        <!-- 路由出口 -->
        <div class="content-wrapper">
          <router-view />
        </div>
      </div>

    </main>
  </div>
</template>

<style scoped>
/* 全局容器布局 */
.admin-container {
  display: flex;
  height: 100vh;
  font-family: 'Arial', sans-serif;
  background-color: #f0f2f5;
}

.sidebar {
  width: 220px;
  background-color: #fff;
  border-right: 1px solid #e6e6e6;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;
}

.sidebar-header {
  display: flex;
  align-items: center;
  padding: 16px 20px;
  font-size: 18px;
  font-weight: 600;
  border-bottom: 1px solid #e6e6e6;
  background-color: #f5f7fa;
}

.sidebar-header i {
  margin-right: 10px;
  color: #409eff;
}

.content-wrapper {
  flex-grow: 1; /* 让内容区域能够填充剩余的空间 */
  padding: 24px;
  overflow-y: auto;
}

.el-menu-vertical-demo {
  border-right: none;
  height: calc(100vh - 60px);
}
.main-body {
  display: flex;
  flex: 1; /* 占满剩余空间 */
  overflow: hidden;
}
* {
  text-decoration: none !important; /* 强制去除下划线 */
}
.content-area {
  color: #333 !important; /* 字体黑色（优先应用） */
}

.el-submenu__title, .el-menu-item {
  padding-left: 30px !important;
  height: 50px;
  line-height: 50px;
}

.el-menu-item {
  padding-left: 50px !important;
  color: #666;
}

.el-menu-item.is-active {
  color: #409eff;
  background-color: #ecf5ff;
}

.el-menu-item:hover {
  background-color: #f5f7fa;
}

/* 主内容区域 */
.main-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background-color: #f8f9fa;
  overflow: hidden;
}

/* 顶部用户栏 */
.main-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 24px;
  height: 60px;
  background-color: #3a5fcd;
  color: #fff;
}

.system-info {
  display: flex;
  align-items: center;
  font-size: 18px;
  font-weight: 600;
}

.system-info i {
  margin-right: 10px;
}

.user-info {
  display: flex;
  align-items: center;
}

.avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  margin-right: 10px;
  border: 1px solid #eee;
}

.user-info span {
  font-size: 16px;
  color: #fff;
  margin-left: 10px;
}

.avatar-wrapper {
  display: flex;
  align-items: center;
  cursor: pointer;
  padding: 8px 12px;
  border-radius: 20px;
  transition: background-color 0.2s ease;
}

.avatar-wrapper:hover {
  background-color: rgba(255, 255, 255, 0.1);
}
</style>